<script setup lang="ts">
import { ref } from 'vue'
import { useGameStore } from '@/stores/modules/game'

const TECHNIQUES_MAP = {
  boil: '煮',
  knife: '切',
  bake: '烤',
  fry: '炸',
  steam: '蒸',
  stirfry: '炒',
} as const

type TechniquesType = keyof typeof TECHNIQUES_MAP

export interface IChefsModel {
  rarity: number[]
  techniques: TechniquesType[]
  chefId: number | null
}

const emit = defineEmits<{ (e: 'updateChefsModel', data: IChefsModel): void }>()
const showModal = ref(false)

function open(data: IChefsModel) {
  showModal.value = true

  formModel.value = { ...data }
}

const rarityOptions = [
  { label: '五星', value: 5 },
  { label: '四星', value: 4 },
  { label: '三星', value: 3 },
  { label: '二星', value: 2 },
  { label: '一星', value: 1 },
]

const techniquesOptions = (Object.keys(TECHNIQUES_MAP) as TechniquesType[]).map((key) => ({
  label: TECHNIQUES_MAP[key],
  value: key,
}))

const chefIdOptions = useGameStore().chefs.map((chef) => ({
  label: chef.name,
  value: chef.chefId,
}))

const formModel = ref<IChefsModel>({
  chefId: null,
  rarity: [],
  techniques: [],
})

function onConfirm() {
  emit('updateChefsModel', formModel.value)
  showModal.value = false
}

defineExpose({ open })
</script>

<template>
  <n-modal v-model:show="showModal">
    <n-card style="width: 650px" title="厨师选择">
      <n-form ref="formRef" label-placement="left">
        <n-grid :x-gap="16" :cols="2">
          <n-gi :span="2">
            <n-form-item label="厨师">
              <n-select
                v-model:value="formModel.chefId"
                filterable
                placeholder="请选择"
                :options="chefIdOptions"
                clearable
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="星级">
              <n-select
                v-model:value="formModel.rarity"
                multiple
                placeholder="请选择"
                :options="rarityOptions"
                clearable
                max-tag-count="responsive"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="技法">
              <n-select
                v-model:value="formModel.techniques"
                multiple
                placeholder="请选择"
                :options="techniquesOptions"
                clearable
                max-tag-count="responsive"
              />
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
      <n-flex justify="end">
        <n-button @click="showModal = false">取消</n-button>
        <n-button type="primary" @click="onConfirm">确认</n-button>
      </n-flex>
    </n-card>
  </n-modal>
</template>

<style lang="scss" scoped></style>
